<template>
  <div>
    <div class="block ">
      <el-timeline ref="timeline">
        <transition-group name="delList">
          <el-timeline-item :timestamp="item.createTime | format" placement="top" v-for="(item,index) in talkList"
            :key="item._id">
            <el-card>
              <el-row>
                <el-col :span="2">
                  <el-avatar
                    :src="item.avatar ? $urlBase+item.avatar :`https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png`"
                    :size='50'>
                  </el-avatar>
                </el-col>
                <el-col :span="21">
                  <div>
                    <h4 class="username">{{item.username}}</h4>
                    <p class="info">{{item.talk}}</p>
                    <p class="createTime">{{item.createTime | format}}</p>
                  </div>
                </el-col>
                <el-col :span="1"><i class="el-icon-delete" @click="handleDel(index,item._id)"></i></el-col>
              </el-row>
            </el-card>
          </el-timeline-item>
        </transition-group>
      </el-timeline>
      <div class="newtons-cradle" v-show="!isLoad">
        <div class="newtons-cradle__dot"></div>
        <div class="newtons-cradle__dot"></div>
        <div class="newtons-cradle__dot"></div>
        <div class="newtons-cradle__dot">
        </div>
      </div>
    </div>
    <div class="end" v-show="(this.talkList.length === this.allTalk)">
      你看见了世界尽头
      <svg t="1666922444192" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="8309" width="50" height="50">
        <path d="M239.0016 318.6688m-18.8416 0a18.8416 18.8416 0 1 0 37.6832 0 18.8416 18.8416 0 1 0-37.6832 0Z"
          fill="#d81e06" p-id="8310"></path>
        <path d="M389.9392 318.6688m-18.8416 0a18.8416 18.8416 0 1 0 37.6832 0 18.8416 18.8416 0 1 0-37.6832 0Z"
          fill="#d81e06" p-id="8311"></path>
        <path
          d="M815.3088 962.9696H649.216c-38.912 0-70.656-31.744-70.656-70.656s31.744-70.656 70.656-70.656h105.6768c5.7344 0 10.24 4.5056 10.24 10.24s-4.5056 10.24-10.24 10.24H649.216c-27.648 0-50.176 22.528-50.176 50.176s22.528 50.176 50.176 50.176h166.0928c27.648 0 50.176-22.528 50.176-50.176V212.992c0-32.768 26.624-59.392 59.392-59.392s59.392 26.624 59.392 59.392v80.896c0 5.7344-4.5056 10.24-10.24 10.24s-10.24-4.5056-10.24-10.24V212.992c0-21.504-17.408-38.912-38.912-38.912s-38.912 17.408-38.912 38.912v679.3216c0 38.912-31.744 70.656-70.656 70.656z"
          fill="#d81e06" p-id="8312"></path>
        <path
          d="M825.5488 614.4c-3.6864 0-7.3728-2.048-9.216-5.7344C749.568 474.9312 624.64 399.5648 556.032 366.592c-5.12-2.4576-7.168-8.6016-4.7104-13.7216 2.4576-5.12 8.6016-7.168 13.7216-4.7104 70.8608 34.2016 200.2944 112.2304 269.7216 251.4944 2.4576 5.12 0.4096 11.264-4.5056 13.7216-1.6384 0.6144-3.072 1.024-4.7104 1.024zM392.8064 932.6592c-38.912 0-70.656-31.744-70.656-70.656V595.3536c-12.4928-9.4208-48.9472-39.1168-74.752-77.6192-3.072-4.7104-1.8432-11.0592 2.8672-14.1312s11.0592-1.8432 14.1312 2.8672c28.672 43.008 73.3184 75.1616 73.728 75.5712l4.3008 3.072V862.208c0 27.648 22.528 50.176 50.176 50.176s50.176-22.528 50.176-50.176V656.7936c0-7.7824 4.5056-14.7456 11.6736-17.8176 7.168-3.072 15.1552-1.8432 20.8896 3.2768 31.744 28.2624 115.5072 96.4608 206.848 119.3984 5.5296 1.4336 8.8064 6.9632 7.3728 12.4928-1.4336 5.5296-6.9632 8.8064-12.4928 7.3728-94.208-23.552-179.6096-92.3648-213.8112-122.4704v202.9568c0.2048 38.912-31.5392 70.656-70.4512 70.656zM314.368 494.7968c-80.4864 0-146.0224-65.536-146.0224-146.0224 0-2.2528 0-4.5056 0.2048-6.5536-19.8656-29.2864-30.5152-63.488-30.5152-99.1232 0-97.28 79.0528-176.3328 176.3328-176.3328s176.3328 79.0528 176.3328 176.3328c0 35.2256-10.4448 69.4272-30.1056 98.5088l-0.6144 0.6144c-0.6144 43.4176-16.384 82.5344-44.4416 110.7968-26.624 27.0336-62.6688 41.7792-101.1712 41.7792z m-129.024-164.2496c2.4576 2.048 4.096 5.12 3.8912 8.6016v0.4096c-0.2048 3.072-0.4096 6.144-0.4096 9.216 0 69.2224 56.32 125.5424 125.5424 125.5424 32.9728 0 63.8976-12.6976 86.8352-35.6352 24.9856-25.1904 38.7072-60.6208 38.5024-99.9424v-3.6864l4.3008-5.12c17.2032-25.6 26.2144-55.5008 26.2144-86.6304 0-86.016-69.8368-155.8528-155.8528-155.8528s-155.8528 69.8368-155.8528 155.8528c0 31.1296 9.216 61.2352 26.8288 87.2448z"
          fill="#d81e06" p-id="8313"></path>
        <path
          d="M314.368 278.1184l-8.8064-14.7456c-0.4096-0.6144-43.6224-70.656-126.976-70.656-5.7344 0-10.24-4.5056-10.24-10.24s4.5056-10.24 10.24-10.24c73.1136 0 117.9648 45.4656 135.7824 68.1984 17.8176-22.7328 62.6688-68.1984 135.7824-68.1984 5.7344 0 10.24 4.5056 10.24 10.24s-4.5056 10.24-10.24 10.24c-83.7632 0-126.5664 69.8368-126.976 70.656l-8.8064 14.7456zM143.5648 351.4368c-55.5008 0-100.7616-45.2608-100.7616-100.7616S88.064 149.9136 143.5648 149.9136c5.7344 0 10.24 4.5056 10.24 10.24s-4.5056 10.24-10.24 10.24c-44.2368 0-80.2816 36.0448-80.2816 80.2816 0 50.176 46.2848 89.7024 98.304 78.2336 5.5296-1.2288 11.0592 2.2528 12.288 7.7824 1.2288 5.5296-2.2528 11.0592-7.7824 12.288-7.5776 1.6384-15.1552 2.4576-22.528 2.4576zM475.7504 351.4368c-4.3008 0-8.3968-0.2048-12.4928-0.6144-5.5296-0.6144-9.6256-5.7344-9.0112-11.264 0.6144-5.5296 5.7344-9.6256 11.264-9.0112 3.2768 0.4096 6.7584 0.6144 10.0352 0.6144 44.2368 0 80.2816-36.0448 80.2816-80.2816 0-41.1648-30.72-75.5712-71.2704-79.872-5.5296-0.6144-9.6256-5.7344-9.0112-11.264 0.6144-5.5296 5.7344-9.6256 11.264-9.0112 50.9952 5.5296 89.7024 48.7424 89.7024 100.352 0 55.0912-45.2608 100.352-100.7616 100.352zM567.0912 886.784c-1.8432 0-3.4816-0.4096-5.12-1.4336-20.48-11.8784-33.1776-33.9968-33.1776-57.5488 0-36.6592 29.9008-66.56 66.56-66.56 5.7344 0 10.24 4.5056 10.24 10.24s-4.5056 10.24-10.24 10.24c-25.3952 0-46.08 20.6848-46.08 46.08 0 16.384 8.8064 31.5392 22.9376 39.936 4.9152 2.8672 6.5536 9.216 3.6864 13.9264-1.8432 3.2768-5.3248 5.12-8.8064 5.12z"
          fill="#d81e06" p-id="8314"></path>
        <path
          d="M303.7184 858.112c-1.6384 0-3.2768-0.4096-4.9152-1.2288-22.528-12.4928-36.6592-36.0448-36.6592-61.8496V583.68c0-5.7344 4.5056-10.24 10.24-10.24s10.24 4.5056 10.24 10.24v211.3536c0 18.2272 10.0352 35.0208 26.0096 43.8272 4.9152 2.6624 6.7584 9.0112 4.096 13.9264-1.8432 3.4816-5.3248 5.3248-9.0112 5.3248z"
          fill="#d81e06" p-id="8315"></path>
      </svg>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  data () {
    return {
      allTalk: 0,
      talkList: [],
      page: 1,
      isLoad: true
    }
  },
  filters: {
    //  加载时间
    format (date) {
      return dayjs((date - 0)).format('YYYY-MM-DD HH:mm')
    }
  },
  mounted () {
    this.gelTalkList()
    window.onscroll = () => {
      if (!this.isLoad) return
      if (this.talkList.length === this.allTalk) return
      const bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop
      let allHeight = bodyScrollTop + window.innerHeight
      allHeight = (this.$refs.timeline.$el.offsetHeight + this.$refs.timeline.$el.offsetTop) - allHeight
      allHeight < 0 && this.gelTalkList()
      // 注释
    }
  },
  beforeDestroy () {
    window.onscroll = null
  },
  methods: {
    gelTalkList () {
      this.isLoad = false
      this.$axios.get(`/talk?page=${this.page++}&limite=6`).then(res => {
        this.isLoad = true
        this.allTalk = res.data.info.num
        this.talkList.push(...res.data.info.data)
      })
    },
    handleDel (index, id) {
      this.$axios.delete(`/talk/${id}`).then(res => {
        if (res.data.ok) {
          this.talkList.splice(index, 1)
          this.$message({
            message: res.data.info,
            type: 'success'
          })
        } else {
          this.$message.error(res.data.info)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.delList-leave-active {
  animation: move 0.7s;
}
.delList-enter-active {
  animation: move 0.7s reverse;
}
@keyframes move {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}
.info {
  width: 100%;
  margin: 20px 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.end {
  text-align: center;
  color: #999;
  font-size: 12px;
  margin: 10px 0;
}
.username {
  font-weight: 700;
  font-size: 16px;
}
.el-icon-delete {
  color: red;
  cursor: pointer;
}
.el-icon-delete:active {
  color: rgb(119, 6, 6);
}
.createTime {
  color: #999;
  font-size: 12px;
}
/* From uiverse.io by @G4b413l */
.newtons-cradle {
  --uib-size: 50px;
  --uib-speed: 1.2s;
  --uib-color: #474554;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--uib-size);
  height: var(--uib-size);
  margin: auto;
}

.newtons-cradle__dot {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  width: 25%;
  transform-origin: center top;
}

.newtons-cradle__dot::after {
  content: "";
  display: block;
  width: 100%;
  height: 25%;
  border-radius: 50%;
  background-color: var(--uib-color);
}

.newtons-cradle__dot:first-child {
  animation: swing var(--uib-speed) linear infinite;
}

.newtons-cradle__dot:last-child {
  animation: swing2 var(--uib-speed) linear infinite;
}

@keyframes swing {
  0% {
    transform: rotate(0deg);
    animation-timing-function: ease-out;
  }

  25% {
    transform: rotate(70deg);
    animation-timing-function: ease-in;
  }

  50% {
    transform: rotate(0deg);
    animation-timing-function: linear;
  }
}

@keyframes swing2 {
  0% {
    transform: rotate(0deg);
    animation-timing-function: linear;
  }

  50% {
    transform: rotate(0deg);
    animation-timing-function: ease-out;
  }

  75% {
    transform: rotate(-70deg);
    animation-timing-function: ease-in;
  }
}
</style>
